<template>
  <div>
    <div style="margin-left: 30px;background-color: #FCF0C6;width: 1200px;height: 100px;margin-top: 60px">
      <br>
      <p align="center" style="margin-top: 10px"><b>维数金融将根据您填写的信息进行初步审核，您填写的信息资料越真实详尽，您申请融资的审批通过率越高。同时，我们有严格的用户信息操作规范.</b></p>
      <p style="margin-left: 73px"><font color="#dc143c"><b>确保您的隐私不被泄露，请勿填写虚假信息。</b></font></p>
    </div>
    <div style="margin-top: 60px;margin-left: 30px">
      <el-row>
        <el-form ref="hire" :model="formData" :rules="rules" size="medium" label-width="100px"
                 label-position="left">
          <el-col :span="8">
            <el-form-item label-width="150px" label="租房合同编号" prop="number">
              <el-input v-model="formData.cfContractNo" placeholder="租房合同编号" readonly clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="-1px" label="" prop="field102">
              <el-button type="warning" icon="el-icon-search" size="medium" @click="openCon">租房合同查询</el-button>

              <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
                <el-table :data="gridData">
                  <el-table-column property="tenantName" label="租房合同"></el-table-column>
                  <el-table-column property="roomName" label="房产信息"></el-table-column>
                  <el-table-column property="signingDate" label="签约日期"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="sc">
                      <el-button type="warning" icon="el-icon-search" size="medium" @click="checkAt(sc.row)">选择</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="total>0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="openCon"
                />
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="8">
                <el-form-item label-width="150px" label="承担房间" prop="house">
                  <el-input v-model="formData.roomName" placeholder="承担房间" readonly clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label-width="150px" label="房产编号" prop="houseNumber">
                  <el-input v-model="formData.houseId" placeholder="房产编号" readonly clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="8">
                <el-form-item label-width="150px" label="租客姓名" prop="name">
                  <el-input v-model="formData.tenantName" placeholder="租客姓名" readonly clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label-width="150px" label="租客手机号" prop="phone">
                  <el-input v-model="formData.tenantPhone" placeholder="租客手机号" readonly clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="150px" label="租客身份证" prop="idCard">
              <el-input v-model="formData.tenantCardNo" placeholder="租客身份证" readonly clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-row>
              <hr><br>
              <el-col :span="8">
                <el-form-item label-width="150px" label="金融产品选择" prop="cpid">
                  <el-select @change="changeprodect" v-model="formData.cpid" placeholder="请选择">
                    <el-option v-for="item in option1" :label="item.jrProductName" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label-width="79px" label="公寓承担" prop="gscd">
                  <el-input v-model="formData.gscd" clearable :style="{width: '100%'}">%
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label-width="79px" label="租客承担" prop="zkcd">
                  <el-input v-model="formData.zkcd" clearable :style="{width: '100%'}">%
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label-width="79px" label="年利率" prop="nll">
                  <el-input v-model="formData.nll" clearable :style="{width: '100%'}">%
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="150px" label="借款金额" prop="jqje">
              <el-input v-model="formData.jqje" placeholder="借款金额"  clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="150px" label="年一次性服务费率" prop="fwf">
              <el-input v-model="formData.fwf" placeholder="年一次性服务费率"  clearable
                        :style="{width: '100%'}">%</el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="8">
                <el-form-item label-width="150px" label="借款期限" prop="jkqx">
                  <el-input v-model="formData.jkqx" placeholder="/月" clearable readonly
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label-width="150px" label="授信额度" prop="sxed">
                  <el-input v-model="formData.sxed" placeholder="授信额度" readonly
                            :style="{width: '100%'}">%</el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-col>

          <el-col :span="24">
            <el-row>
              <el-col :span="14">
                <el-form-item label="备注" prop="bz">
                  <el-input v-model="formData.bz" type="textarea" placeholder="请输入备注"
                            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '40%'}"></el-input>
                </el-form-item>
              </el-col>
              <div><el-button type="warning"   @click="fenqi" >分期计算详情</el-button></div>


            </el-row>
            <div v-if="table==true">
              <el-table :data="tableData" style="width: 100%" >
                <el-table-column prop="no" label="序号" width="180"></el-table-column>
                <el-table-column prop="realEstateInfo" label="房产信息" width="180"></el-table-column>
                <el-table-column prop="roomCode" label="房源编号" width="180"></el-table-column>
                <el-table-column prop="monthRepaymentAmount" label="账期还款金额" width="180"></el-table-column>
                <el-table-column prop="monthRateAmount" label="账期利息" width="180"></el-table-column>
                <el-table-column prop="endLoanday" label="还款期限" width="180"></el-table-column>
              </el-table>
              <el-col :span="8">
                <el-form-item label-width="150px" label="应付租约合计" prop="jqje">
                  <el-input v-model="datas.reLeaseCount" placeholder="应付租约合计" readonly :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label-width="150px" label="还款总额合计" prop="fwf">
                  <el-input v-model="datas.coHirerentCount" placeholder="还款总额合计"  readonly :style="{width: '100%'}">%</el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label-width="150px" label="服务费" prop="jkqx">
                      <el-input v-model="datas.serCharge" placeholder="服务费" readonly :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label-width="150px" label="收房贷利息合计" prop="sxed">
                      <el-input v-model="datas.inInterestCount" placeholder="收房贷利息合计" readonly :style="{width: '100%'}">%</el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </div>
          <div>
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/finance/product/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-button type="warning" icon="el-icon-search" size="medium" @click="lookFile">预览</el-button>
          </div>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
import { listContract,changelistprodect,listinstall,fenqilist } from "@/api/banking/loan";
export default {
  components: {},
  props: [],
  data() {
    return {
      table:false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      datas:{
        ser_charge:'',
        re_lease_count:'',
        co_hirerent_count:'',
        in_interest_count:'',
      },
      formData: {
        cf_contract_no: undefined,
        field102: undefined,
        room_name: undefined,
        house_id: undefined,
        tenant_name: undefined,
        tenant_phone: undefined,
        tenant_card_no: undefined,
        cpid: undefined,
        gscd: '',
        zkcd: '',
        nll: '',
        jqje: '',
        fwf: undefined,
        jkqx: undefined,
        sxed: undefined,
        start_date:'',
        end_date:'',
        bz: undefined,
      },
      counts:{
        cf_contract_no:'',
        jqje:'',
        jkqx:'',
        sxed:'',
        nll:'',
        zkcd:'',
        gscd:'',
        fwf:'',
        house_id:'',
        end_date:'',
        start_date:'',
        room_name:'',
      },
      img:'',
      rules: {
        number: [{
          required: true,
          message: '不能为空，租房合同编号',
          trigger: 'blur'
        }],
        house: [{
          required: true,
          message: '不能为空，承担房间',
          trigger: 'blur'
        }],
        houseNumber: [{
          required: true,
          message: '不能为空，房产编号',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '不能为空，租客姓名',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '不能为空，租客手机号',
          trigger: 'blur'
        }],
        idCard: [{
          required: true,
          message: '不能为空，租客身份证',
          trigger: 'blur'
        }],
        cpid: [{
          required: true,
          message: '不能为空，请选择金融产品选择',
          trigger: 'blur'
        }],
        gscd: [{
          required: true,
          message: '不能为空，请输入公寓承担',
          trigger: 'blur'
        }],
        zkcd: [{
          required: true,
          message: '不能为空，请输入租客承担',
          trigger: 'blur'
        }],
        nll: [{
          required: true,
          message: '不能为空，请输入年利率',
          trigger: 'blur'
        }],
        jqje: [{
          required: true,
          message: '不能为空，借款金额',
          trigger: 'blur'
        }],
        fwf: [{
          required: true,
          message: '不能为空，年一次性服务费率',
          trigger: 'blur'
        }],
        jkqx: [{
          required: true,
          message: '不能为空，借款期限',
          trigger: 'blur'
        }],
        sxed: [{
          required: true,
          message: '不能为空，授信额度',
          trigger: 'blur'
        }],
        bz: [{
          required: true,
          message: '不能为空，请输入备注',
          trigger: 'blur'
        }],
      },
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      option1: [],
      imageUrl: '',
      imgss: '',
      fileList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getOption();
  },
  mounted() {
  },
  methods: {
    //分期详情
    fenqi(){
      this.table=true;
      this.counts.cf_contract_no=this.formData.cf_contract_no;
      this.counts.fwf=this.formData.fwf;
      this.counts.start_date=this.formData.start_date;
      this.counts.end_date=this.formData.end_date;
      this.counts.nll=this.formData.nll;
      this.counts.jkqx=this.formData.jkqx;
      this.counts.jqje=this.formData.jqje;
      this.counts.house_id=this.formData.house_id;
      this.counts.room_name=this.formData.room_name;
      this.counts.sxed=this.formData.sxed;
      this.counts.zkcd=this.formData.zkcd;

      /*console.log("前端往后端传参"+JSON.stringify(this.counts));*/
      fenqilist(this.counts).then(res=>{
          this.tableData=res.spList;
          this.datas.ser_charge=res.counts1.ser_charge;
          this.datas.re_lease_count=res.counts1.re_lease_count;
          this.datas.co_hirerent_count=res.counts1.co_hirerent_count;
          this.datas.in_interest_count=res.counts1.in_interest_count;
          /*console.log("分期返回的数据"+JSON.stringify(res));*/
      })
    },
    //如果下拉框发生改变就查询数据
    changeprodect(){
      changelistprodect(this.formData.cpid).then(res=>{
        console.log(res.credit_line);
        this.formData.sxed=res.credit_line;
        this.formData.jkqx=res.instalment_period;
      })

    },
    //表单添加
    submitForm() {
      this.$refs['hire'].validate(valid => {
        if (!valid) {

        }
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['hire'].resetFields()
    },
    openCon(){
      this.dialogTableVisible=true;
      listContract(this.queryParams).then(rex=>{
        console.log(rex.rows)
        this.gridData=rex.rows;
        this.total = rex.total;
        this.loading = false;

      })
    },
    checkAt(row){
      this.formData.cfContractNo=row.cfContractNo;
      this.formData.roomName=row.roomName;
      this.formData.houseId=row.houseId;
      this.formData.tenantName=row.tenantName;
      this.formData.tenantPhone=row.tenantPhone;
      this.formData.tenantCard_no=row.tenantCardNo;
      this.formData.startDate=row.startDate;
      this.formData.endDate=row.endDate;
      this.dialogTableVisible=false;


    },
    getOption(){
      listinstall().then(rex=>{
        this.option1=rex;
      })
    },
    handleAvatarSuccess(res, file) {
      console.log(file.response.url);
      this.imageUrl = URL.createObjectURL(file.raw);
      this.img=file.response.url;
    },
    lookFile(){
      let Base64 = require('js-base64').Base64
      window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(this.img)));


      // var fileUrl =url1+"|"+"url2";//多文件使用“|”字符隔开
      // window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(base64Encode(this.img)));
    },
    lookFile2(){
      console.log("1.2132132132132132......."+this.fileList);
      // var fileUrl = url1+"|"+"url2";//多文件使用“|”字符隔开
      // window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(base64Encode(fileUrl)));
    },
    handleRemove(file, fileList) {
      console.log("*****--"+file, fileList);
    },
    handlePreview(file) {
      console.log(file);
      this.fileList.concat(file.response);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}

</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
